<template>
    <div>
        <el-button type="primary" @click="dialogVisible = true">新增字典类型</el-button>
        <el-table :data="dictTypeList" style="width: 100%">
            <el-table-column type="index" label="#" width="180"/>
            <el-table-column prop="dictName" label="字典名称" width="180"/>
            <el-table-column label="字典名称" width="180">
                <template v-slot:default="scope">
                    <a class="a_class" :href="scope.row.dictType">{{ scope.row.dictType }}</a>
                </template>
            </el-table-column>
            <el-table-column label="状态" width="180">
                <template v-slot:default="scope">
                    <el-tag v-if="scope.row.status === '0'">
                        正常
                    </el-tag>
                    <el-tag v-else type="danger">
                        禁用
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注"/>
        </el-table>

        <el-pagination @current-change="handleCurrentChange" :current-page="QueryPage.pageNum"  :page-size="QueryPage.pageSize" style="margin-top: 10px" background layout="prev, pager, next" :total="total" />
        <!--      <pre>-->
        <!--          {{ dictTypeList }}-->
        <!--      </pre>-->

        <el-dialog
                v-model="dialogVisible"
                title="新增字典类型"
                width="30%"
        >
            <el-form
                    label-width="100px"
                    :model="dictForm"
                    style="max-width: 460px"
            >
                <el-form-item label="字典名称">
                    <el-input v-model="dictForm.dictName"/>
                </el-form-item>
                <el-form-item label="字典类型">
                    <el-input v-model="dictForm.dictType"/>
                </el-form-item>
                <el-form-item label="字典类型">
                    <el-radio-group v-model="dictForm.status">
                        <el-radio label="0" size="large">正常</el-radio>
                        <el-radio label="1" size="large">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注信息">
                    <el-input v-model="dictForm.remark"/>
                </el-form-item>
            </el-form>

            <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dictAddHandler">
          确定
        </el-button>
      </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>

export default {
    name: "Dict",
    data() {
        return {
            QueryPage: {
                pageNum: 1,
                pageSize: 5
            },
            dictTypeList: [],
            dialogVisible: false,
            dictForm: {
                status: '0',
            },
            total: 0,
        }
    },
    methods: {
        getDictData() {
            this.$http.get(`/system/dict/type`,
                {params: this.QueryPage}
            ).then(res => {
                this.dictTypeList = res.data.data.data;
                this.total = res.data.data.rows;
                console.log(res)
            })
        },
        dictAddHandler() {
            this.$http.post(`/system/dict/type/add`, this.dictForm).then(res => {
                console.log(res)
                if (res.status === 200) {
                    this.getDictData();
                    this.dictForm = {};
                    this.dictForm.status = '0';
                    this.dialogVisible = false;
                } else {
                    alert("添加失败")
                }
            })
        },
        handleCurrentChange(newPage){
            this.QueryPage.pageNum = newPage;
            this.getDictData();
        }
    },
    created() {
        this.getDictData();
    }
}
</script>

<style scoped>
.a_class {
    color: rgba(121, 187, 255, 0.99);
    text-decoration: none;
}
</style>
